// 源插件
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';

// 视图插件
import {
  Empty,
  Spin,
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Steps,
  Radio,
  Upload,
  Tree,
} from 'antd';

// 外部组件
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

// css OR less预编译器
import styles from './AuthorityList.less';

// 图片

const { TreeNode } = Tree;

/**
 *  Created by xjc on 2019/5/15
 *  Describe:数据连接
 */

@connect(({ authority, loading }) => ({
  authority,
  loading: loading.models.AuthorityRule,
}))
@Form.create()
class AuthorityPermission extends PureComponent {
  componentWillMount() {}

  /**
   *  Created by xjc on 2019/5/15
   *  Describe:当前状态
   */

  state = {
    expandedKeys: [],
    autoExpandParent: true,
    checkedKeys: [],
    selectedKeys: [],
    permissionIds: [], // 已选权限ids
    treeData: [], // 权限树
  };

  /**
   *  Created by xjc on 2019/5/20
   *  Describe:modal操作
   */

  onChange = e => {};

  okHandle() {
    const { dispatch, record } = this.props;
    const { permissionIds } = this.state;
    dispatch({
      type: 'authority/UpdateRolePermission',
      payload: {
        permissionIds,
        roleId: record.id,
      },
      callback: res => {
        if (res.code === 1) {
          message.success(res.message);
          this.props.closeAuthorityPermission();
        } else {
          message.warning(res.message);
        }
      },
    });
  }

  cancelHandle() {
    this.props.closeAuthorityPermission();
  }

  /**
   *  Created by xjc on 2019/5/21
   *  Describe:Tree
   */

  onExpand = expandedKeys => {
    console.log('onExpand', expandedKeys);
    // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    });
  };

  onCheck = (checkedKeys, e) => {
    console.log('onCheck', checkedKeys);
    const permissionIds = [];
    const { checkedNodes } = e;
    for (let i = 0; i < checkedNodes.length; i++) {
      permissionIds[i] = checkedNodes[i].props.dataRef.code;
    }
    console.log(permissionIds);
    this.setState({ checkedKeys, permissionIds });
  };

  onSelect = (selectedKeys, info) => {
    console.log('onSelect', info);
    this.setState({ selectedKeys });
  };

  renderTreeNodes = data =>
    data.map(item => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode {...item} />;
    });

  /**
   *  Created by xjc on 2019/5/15
   *  Describe:视图
   */

  render() {
    const {
      authority: { treeData },
    } = this.props;
    const { expandedKeys, autoExpandParent, checkedKeys, selectedKeys } = this.state;

    return (
      <Modal
        destroyOnClose
        title="角色权限详情"
        visible
        centered
        onOk={this.okHandle.bind(this)}
        onCancel={this.cancelHandle.bind(this)}
      >
        {treeData.tree.length === 0 ? (
          <Empty />
        ) : (
          <Tree
            checkable
            // onExpand={this.onExpand}
            // defaultExpandAll={true}
            // expandedKeys={expandedKeys}
            autoExpandParent={autoExpandParent}
            onCheck={this.onCheck}
            checkedKeys={checkedKeys}
            onSelect={this.onSelect}
            selectedKeys={selectedKeys}
          >
            {this.renderTreeNodes(treeData.tree)}
          </Tree>
        )}
      </Modal>
    );
  }

  componentDidMount() {
    const { dispatch, record } = this.props;

    /* 导入列表数据 */
    dispatch({
      type: 'authority/GetAuthorityPermissionById',
      payload: { id: record.id },
      callback: res => {
        this.setState({
          checkedKeys: res.defaultData,
          permissionIds: res.permissionIds,
        });
      },
    });
  }

  componentWillUnmount() {}
}

export default AuthorityPermission;
